<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>折叠面板</title>
	</head>
	<style>
	   /* .tab-content can be styled as you like */
	   main {
	       max-width: 400px; /* 设置主要内容宽度的上限为400像素 */
	       margin: 0 auto; /* 水平居中 */
	   }
	   
	   p {
	       font-family: monospace; /* 使用等宽字体 */
	       font-size: 13px; /* 设置字体大小为13像素 */
	   }
	   
	   summary {
	       font-size: 1rem; /* 设置字体大小为1rem */
	       font-weight: 600; /* 设置字体粗细为600 */
	       background-color: #f3f3f3; /* 设置背景颜色为#f3f3f3 */
	       color: #000; /* 设置文字颜色为黑色 */
	       padding: 1rem; /* 设置内边距为1rem */
	       margin-bottom: 1rem; /* 设置底部外边距为1rem */
	       outline: none; /* 取消选中时的外边框 */
	       border-radius: 0.25rem; /* 设置边框圆角为0.25rem */
	       cursor: pointer; /* 将光标设置为手型 */
	       position: relative; /* 设置为相对定位 */
	   }
	   
	   details[open] summary~* {
	       animation: sweep .5s ease-in-out; /* 当 details 元素打开后，对其后的所有兄弟元素应用动画效果 .5s 渐变、ease-in-out 缓动 */
	   }
	   
	   @keyframes sweep {
	       0% {
	           opacity: 0; /* 初始透明度为0，即不可见 */
	           margin-top: -10px; /* 初始顶部外边距为-10像素，向上偏移 */
	       }
	   
	       100% {
	           opacity: 1; /* 最终透明度为1，完全可见 */
	           margin-top: 0px; /* 最终顶部外边距为0像素，恢复正常位置 */
	       }
	   }
	   
	   details>summary::after {
	       position: absolute; /* 设置为绝对定位 */
	       content: "+"; /* 在 summary 元素之后插入内容为 "+"，用作折叠图标 */
	       right: 20px; /* 设置距离右侧的位置为20像素 */
	   }
	   
	   details[open]>summary::after {
	       position: absolute; /* 设置为绝对定位 */
	       content: "-"; /* 在 summary 元素之后插入内容为 "-"，用作展开图标 */
	       right: 20px; /* 设置距离右侧的位置为20像素 */
	   }
	   
	   details>summary::-webkit-details-marker {
	       display: none; /* 隐藏默认的折叠图标 */
	   }
	   
	   .tab-content{
		   background-color: aqua;
		   margin-top: 0%;
		   padding-top: 0%;
	       box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* 添加一个阴影效果，颜色为黑色透明度为0.2的阴影 */
	   }
	    </style>
	<body>
		 <main>
		        <details open>
		            <summary>HTML</summary>
		            <div class="tab-content">
		                your text goes here
		            </div>
		        </details>
		
		        <details>
		            <summary>CSS</summary>
		            <div class="tab-content">
		                <p>your text goes here</p>
		            </div>
		        </details>
		        <details>
		            <summary>javascript</summary>
		            <div class="tab-content">
		                <p>your text goes here</p>
		            </div>
		        </details>
		    </main>
	</body>
</html>